<template>
  <div class="examInfo">
    <div class="topView">
      <span v-if="question.type == 0">单选题</span>
      <span v-if="question.type == 1">多选题</span>
      <span v-if="question.type == 2">判断题</span>
      （{{ questionObj.nowTypeNum }}/{{questionObj.totalTypeNum}}题，合计{{questionObj.totalTypeScore}}分）
      <div class="left" @click="preQ" v-if="questionObj.nowNum != 1">上一题</div>
      <div class="left" v-else></div>
      <div class="right" @click="nextQ" v-if="questionObj.nowNum != questionObj.totalNum">下一题</div>
      <div class="right" v-else></div>
    </div>
    <div class="questionView">
      <div class="title">
        <span class="questionType" style="background-color: #3ccba6" v-if="question.type == 0">单选</span>
        <span class="questionType" style="background-color: #02aceb" v-if="question.type == 1">多选</span>
        <span class="questionType" style="background-color: #7077f5" v-if="question.type == 2">判断</span>
        {{ question.question }}({{ question.standardScore }}分)
      </div>
      <div class="optionList">
        <div class="option" v-for="(item,index) in question.answerOptionList" @click="selectOption(item,question)"
             :class="{'active':question.personalAnswerArr.indexOf(item.id) > -1}">
          {{ item.optionCode}}.{{ item.optionName }}
        </div>
      </div>
    </div>
    <div class="bottomView">
      <div class="time">剩余答题时间：{{ timeShow }}</div>
      <div class="showCard" @click="showChard">答题卡({{ questionObj.answeredNum }}/{{ questionObj.totalNum }})</div>
      <div class="submit" @click="submitPre">提交</div>
    </div>
    <van-popup v-model="cardShow" position="bottom" :style="{ height: '80%' }" >
      <van-collapse v-model="activeNames">
        <van-collapse-item title="单选题" name="1">
          <div class="questionList">
            <div class="block" @click="goQuestion(item)"  v-for="(item,index) in singleChoice" :class="{'active':item.personalAnswerArr.length > 0}">{{index+1}}</div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="多选题" name="2">
          <div class="questionList">
            <div class="block" @click="goQuestion(item)" v-for="(item,index) in multipleChoice" :class="{'active':item.personalAnswerArr.length > 0}">{{index+1}}</div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="判断题" name="3">
          <div class="questionList">
            <div class="block" @click="goQuestion(item)" v-for="(item,index) in judge" :class="{'active':item.personalAnswerArr.length > 0}">{{index+1}}</div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <van-button type="primary" style="width: 90%;margin-left: 5%"  block @click="submitPre">提交</van-button>
    </van-popup>
    <van-dialog class="dialog" v-model="showPass" theme='round-button' @confirm="confirm">
      <van-icon name="passed" class="icon"/>
      <div class="title">恭喜您通过考试</div>
      <div class="message">{{ message }}</div>
    </van-dialog>
    <van-dialog class="dialog" v-model="showDone" theme='round-button' @confirm="confirm">
      <van-icon name="warning-o" class="icon wrong"/>
      <div class="title">抱歉，您未通过考试</div>
      <div class="message">{{ message }}</div>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from "vant";
export default {
  data() {
    return {
      pageNo:1,//页码
      pageSize:5,//页数
      total:1,
      examInfo:{},
      listId: 'list' + Math.floor(Math.random() * 100000),
      timeShow:'',
      timeIn:1,
      cardShow:false,
      activeNames:['1','2','3'],
      singleChoice:[],
      multipleChoice:[],
      judge:[],
      questionList:[],
      question:{},
      roomId:null,
      examTime:null,
      questionObj:{
        answeredNum:0,
        nowNum:1,
        totalNum:0,
        totalScore:0,
        nowTypeNum:1,
        totalTypeNum:1,
        totalTypeScore:0,
      },
      showPass:false,
      showDone:false,
      message:''
    }
  },
  beforeDestroy() {
    clearInterval(this.timeIn)
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    showChard(){
      this.cardShow = true
    },
    intTime(time){
      const self = this
      clearInterval(this.timeIn)
      this.timeIn = setInterval(function() {
        time = time - 1000;
        let h, m, s;
        if (time >= 0) {
          h = Math.floor(time / 1000 / 60 / 60);
          m = Math.floor(time / 1000 / 60 % 60);
          s = Math.floor(time / 1000 % 60);
          h = h < 10 ? ("0" + h) : h;
          m = m < 10 ? ("0" + m) : m;
          s = s < 10 ? ("0" + s) : s;
          self.timeShow = h+':'+m+':'+s
        }else {
          //提交试卷
          self.submit()
        }
      },1000)
    },
    getInfo(){
      this.roomId = this.$route.query.roomId
      this.examTime = this.$route.query.examTime
      let obj = {
        roomId:this.roomId,
        viewMode:1,
      }
      const self = this;
      this.request({
        url: '/exam/ztExamRoom/getRoomPersonPaperBySearch',
        method: 'post',
        data:obj
      }).then(function (res) {
        if (res){
          let examInfo = res.data.result
          self.examInfo = examInfo
          let startTime = examInfo.startTime;
          if (startTime == ''){
            startTime = null
          }
          startTime = startTime.replaceAll('-','/')
          let time = new Date(startTime).getTime()+self.examTime*60*1000 - new Date().getTime()
          if (time<=0){
            self.submit()
          }
          self.intTime(time)
          self.initExamData(examInfo)
        }
      })
    },
    initExamData(examInfo){
      let questionList = examInfo.questionList
      let singleChoice = [];
      let multipleChoice = [];
      let judge = [];
      questionList.forEach(function (val) {
        if (val.type == 0){
          singleChoice.push(val)
        }else if (val.type == 1){
          multipleChoice.push(val)
        }else {
          judge.push(val)
        }
      })
      this.singleChoice = singleChoice;
      this.multipleChoice = multipleChoice;
      this.judge = judge;
      this.questionList = singleChoice.concat(multipleChoice).concat(judge)
      this.question = this.questionList[0]
      this.initQuestionObj()
    },
    selectOption(option,question){
      let personalAnswerArr = question.personalAnswerArr;
      if (question.type == 1){
        if (personalAnswerArr.indexOf(option.id)>-1){
          personalAnswerArr.remove(option.id)
        }else {
          personalAnswerArr.push(option.id)
        }
      }else {
        personalAnswerArr = [option.id]
      }
      question.personalAnswerArr = personalAnswerArr;
      this.request({
        url: 'exam/ztTrainPersonRoom/answerQuestion',
        method: 'put',
        data:{
          optionList:personalAnswerArr,
          roomId:this.roomId,
          roomPaperId:question.roomPaperId,
          roomPaperQuestionId:question.id
        }
      }).then(function (res) {})
      this.initQuestionObj()
    },
    preQ(){
      let nowNum = this.questionObj.nowNum
      if (nowNum>1){
        nowNum--
        this.question = this.questionList[nowNum-1]
        this.initQuestionObj()
      }
    },
    nextQ(){
      let nowNum = this.questionObj.nowNum
      if (nowNum<this.questionObj.totalNum){
        nowNum++
        this.question = this.questionList[nowNum-1]
        this.initQuestionObj()
      }
    },
    initQuestionObj(){
      let question = this.question
      let answeredNum= 0,nowNum = 0,totalNum = 0,totalScore = 0,nowTypeNum = 0,totalTypeNum = 0,totalTypeScore=0;
      let questionList = this.questionList;
      totalNum = questionList.length
      questionList.forEach(function (value, index, array) {
        if (value.personalAnswerArr.length > 0){
          answeredNum++
        }
        if (value.id == question.id){
          nowNum = index+1;
        }
        totalScore += value.standardScore;
      })
      let typeQuestionList = []
      if (question.type == 0){
        typeQuestionList = this.singleChoice
      }else if (question.type == 1){
        typeQuestionList = this.multipleChoice
      }else {
        typeQuestionList = this.judge
      }
      totalTypeNum = typeQuestionList.length
      typeQuestionList.forEach(function (value, index, array) {
        if (value.id == question.id){
          nowTypeNum = index+1;
        }
        totalTypeScore += value.standardScore;
      })
      this.questionObj = {
          answeredNum:answeredNum,
          nowNum:nowNum,
          totalNum:totalNum,
          totalScore:totalScore,
          nowTypeNum:nowTypeNum,
          totalTypeNum:totalTypeNum,
          totalTypeScore:totalTypeScore,
      }
    },
    goQuestion(question){
      this.question = question
      this.cardShow = false
      this.initQuestionObj()
    },
    submitPre(){
      if (this.questionObj.answeredNum != this.questionObj.totalNum){
        this.$toast('请答完所有题目！');
        return
      }
      this.submit()
    },
    confirm(){
      this.$router.push({path: "/examList"})
    },
    submit(){
      let self = this
      this.request({
        url: 'exam/ztTrainPersonRoom/handPaper',
        method: 'put',
        data:{
          roomId:this.roomId,
          roomPaperId:this.examInfo.id
        }
      }).then(function (res) {
        let score = res.data.result.score
        let isPassed = res.data.result.isPassed
        if (isPassed == 1){
          self.showPass = true
          self.message = '成绩：'+score+"分"
        }else {
          self.showDone = true
          self.message = '成绩：'+score+"分"
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.dialog{
  padding-top: 30px;
  .icon{
    font-size: 80px;
    color: #5bc97c;
    &.wrong{
      color: orange;
    }
  }
  .title{
    line-height: 80px;
    font-size: 36px;
    font-weight: 500;
  }
  .message{
    line-height: 60px;
    color: #666666;
  }
}
  .topView{
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0px;
  text-align: center;
  font-size: 30px;
  line-height: 100px;
  height: 100px;
  border-bottom: 1px solid gainsboro;
  color: #333;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
  background-color: white;
  .left{
    float: left;
    width: 120px;
    color: #5bc97c;
    font-size: 26px;
    height: 100%;
  }
  .right{
    float: right;
    width: 120px;
    color: #5bc97c;
    font-size: 26px;
    height: 100%;
  }
}
  .questionView{
    margin-top: 100px;
    margin-bottom: 100px;
    width: 100%;
    overflow: hidden;
    background-color: white;
    box-sizing: border-box;
    padding: 30px;
    text-align: left;
    .title{
      font-size: 32px;
      line-height: 50px;
      .questionType{
        font-size:18px;
        color:white;
        background-color:red;
        padding:5px 10px;
        margin-left:10px;
        border-radius:5px;
      }
    }
    .optionList{
      width: 100%;
      overflow: hidden;
      margin-top: 30px;
      .option{
        width: 100%;
        overflow: hidden;
        font-size: 26px;
        color: #666;
        margin-bottom: 40px;
        line-height: 40px;
        border-radius: 40px;
        border: 1px solid gainsboro;
        padding: 20px 30px;
        box-sizing: border-box;
        word-wrap:break-word;
        &.active{
          background-color: #1296db;
          border-color: transparent;
          color: white;
        }
      }
    }
  }
  .bottomView{
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 28px;
    background-color: white;
    position: fixed;
    bottom: 0px;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
    .time{
      width: 50%;
      float: left;
    }
    .showCard{
      width: 30%;
      color: white;
      background-color: #1296db;
      float: left;
    }
    .submit{
      width: 20%;
      color: white;
      background-color: #5bc97c;
      float: left;
    }
  }
  .questionList{
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    .block{
      width: 60px;
      height: 60px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid gainsboro;
      line-height: 58px;
      float: left;
      margin-right: 16px;
      margin-bottom: 20px;
      color: #666666;
      &.active{
        background-color: #5bc97c;
        color: white;
        border-color: #5bc97c;
      }
    }
  }
/*  .preQ{
    width: 80px;
    height: 80px;
    position: fixed;
    z-index: 99;
    left: 30px;
    top: 50%;
    margin-top: -40px;
    background-image: url("../../assets/img/pre.png");
    background-size: 100% 100%;
  }*/
</style>
